<template>
  <div v-loading="loading" class="tree-wrap">
    <template v-if="data.length">
      <el-tree
        ref="tree"
        :data="data"
        :node-key="nodeKey"
        :default-expand-all="defaultExpandAll"
        :expand-on-click-node="false"
        :props="defaultProps"
        highlight-current
        :current-node-key="treeId"
        @node-click="handleNodeClick"
      >
        <div slot-scope="scope" class="custom-tree-node">
          <div>
            <!-- <i class="el-icon-folder file-icon" /> -->
            <el-tag v-if="scope.data.type === '0'" size="small">目录</el-tag>
            <el-tag v-else-if="scope.data.type === '1'" size="small" type="success">菜单</el-tag>
            <el-tag v-else-if="scope.data.type === '2'" size="small" type="info">按钮</el-tag>
            <span style="margin-left:12px">{{ scope.data[label] }}</span>
          </div>
          <template>
            <div v-show="showToolBox">
              <el-tooltip class="item" effect="dark" content="编辑" placement="top" @click.stop.native>
                <i class="el-icon-edit tree-node-icon tree-node-edit" @click.stop="pass('edit', scope)" />
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="插入" placement="top" @click.stop.native>
                <i class="el-icon-plus tree-node-icon tree-node-plus" @click.stop="pass('insert', scope)" />
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="删除" placement="top" @click.stop.native>
                <i class="el-icon-delete tree-node-icon tree-node-delete" @click.stop="pass('remove', scope)" />
              </el-tooltip>
            </div>
            <el-checkbox v-model="scope.data.checked" @change="getCharges(scope)" />
          </template>
        </div>
      </el-tree>
    </template>
    <template v-else>
      <template v-if="!loading">
        <Empty class="empty" />
      </template>
    </template>
  </div>
</template>

<script>
export default {
  name: 'Tree',
  components: {},
  props: {
    loading: {
      type: Boolean,
      default: () => false
    },
    defaultExpandAll: {
      type: Boolean,
      default: () => true
    },
    data: {
      type: Array,
      default: () => [],
      required: true
    },
    nodeKey: {
      type: String,
      default: () => '',
      required: true
    },
    children: {
      type: String,
      default: () => 'children'
    },
    label: {
      type: String,
      default: () => 'label'
    },
    showToolBox: {
      type: Boolean,
      default: () => false
    }
  },
  data() {
    return {
      defaultProps: {
        children: this.children,
        label: this.label
      },
      treeId: ''
    }
  },
  created() {
  },
  mounted() {},
  methods: {
    handleNodeClick(item, node) {
      const payload = {
        item,
        node
      }
      this.$emit('nodeClick', payload)
    },
    pass(type, scope) {
      this.$emit('pass', {
        type,
        data: scope
      })
    },
    setCurrentKey(val) {
      this.$refs.tree.setCurrentKey(val)
    },
    getCharges(data) {
      this.$emit('setNodeChecked', data)
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .file-icon {
  margin-right: 6px;
}
  /deep/ .el-tree {
    padding: 0 12px;
  }
  /deep/ .el-tree-node__content {
    padding: 20px 0;
    border-bottom: 1px solid #f1f2f3;
  }

.custom-tree-node{
  display: flex;
  justify-content: space-between;
  width: 100%;
  align-items: center;
  padding-right: 12px;
  .tree-node-icon{
    color: #217efa;
    cursor: pointer;
  }
  .tree-node-plus{
    margin-right: 8px;
  }
  .tree-node-edit{
    margin-right: 8px;
  }
}
// /deep/ .el-tree--highlight-current{
//   background-color: #2178fb !important;
//   color: #fff !important;
// }
/deep/ .el-tree-node__content{
  transition: all .3s;
}
/deep/ .is-current > .el-tree-node__content {
  // background-color: #2178fb !important;
  // color: #fff !important;
  .tree-node-icon{
    color: #fff !important;
  }
}
/deep/ .el-loading-mask{
  background-color: #fff;
}
/deep/ .el-loading-spinner{
  margin-top: 20%;
}
.empty{
  padding-top: 0;
  margin-top: 20%;
}
</style>
